<template>
    <div id="oprtrend_main" class="echarsBox"></div>
</template>
<script>
import * as echarts from "echarts";
export default {
    name: "oprtrend",
    data() {
        return {};
    },
    mounted() {
        this.drawLine();
    },
    methods: {
        drawLine() {
            let chartDom = document.getElementById("oprtrend_main");
            let myChart = echarts.init(chartDom);
            let option = {
                tooltip: {
                    formatter: '{a} <br/>{b} : {c}'
                },
                xAxis: {
                    type: 'category',
                    data: [
                        '6月',
                        '7月',
                        '8月',
                        '9月',
                        '10月',
                        '11月',
                        '12月',
                        '',
                        '第一周',
                        '第二周',
                        '第三周',
                        '第四周',
                        '第五周'
                    ],
                    axisLabel: {
                        rotate: 45,//字体旋转角度
                        textStyle: {
                            color: '#fff',
                            fontSize: 10
                        }
                    }
                },
                yAxis: [
                    {
                        type: 'value',
                        min: 0,
                        max: 100,
                        interval: 50,
                        axisLine: {
                            //这是y轴文字颜色
                            lineStyle: {
                                color: '#fff',
                                fontSize: 14
                            }
                        },
                        axisLabel: {
                            formatter: '{value}%'
                        },
                        splitLine: {
                            //分割线配置
                            show: true,
                            lineStyle: {
                                color: {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 1,
                                    y2: 1,
                                    colorStops: [
                                        {
                                            offset: 0,
                                            color: 'rgba(0,93,163, 1)'
                                        }
                                    ],
                                    global: false
                                }
                            }
                        }
                    }
                ],
                legend: {
                    data: ['目标', '实际'],
                    icon: 'circle',
                    textStyle: {
                        color: '#fff'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '6%',
                    containLabel: true
                },
                series: [
                    {
                        name: '目标',
                        data: [12, 20, 15, 80, 70, 80, 70, '', 10, 59, 15, 80, 70],
                        type: 'line',
                        symbolSize: 5, //设定实心点的大小
                        itemStyle: {
                            normal: {
                                color: '#0090FF',
                                lineStyle: {
                                    color: '#0090FF'
                                },
                                borderColor: '#FFFFFF',
                                borderWidth: 1
                            }
                        }
                    },
                    {
                        name: '实际',
                        data: [20, 20, 15, 8, 7, 8, 7, '', 20, 20, 15, 8, 7, 8, 7],
                        type: 'line',
                        symbolSize: 5, //设定实心点的大小
                        itemStyle: {
                            normal: {
                                color: '#FF0101',
                                lineStyle: {
                                    color: '#FF0101'
                                },
                                borderColor: '#FFFFFF',
                                borderWidth: 1
                            }
                        }
                    }
                ]
            };

            option && myChart.setOption(option);
            window.addEventListener('resize', myChart.resize);
        },
    },
};
</script>
<style  scoped>
.echarsBox {
    width: 100%;
    height: calc(100% - 41.5px);
    overflow: hidden;
}
</style>
            